<template>
  <div class="contentDiv">
    <div>
      <div>父</div>
      {{ customVal.name }}
      {{ age }}
    </div>
    <child @changeValue="childChange" />
    <drag/>
  </div>
</template>

<script setup>
import { onMounted, ref, provide } from "vue";
import child from "./child.vue";
import drag from "./drag.vue";
const customVal = ref({
  name: "小张",
});

const age = ref(18);

provide("age", age);

provide("customVal", customVal);
const fn = () => {
  setTimeout(() => {
    customVal.value.name = "小李";
  }, 3000);
};
fn();
const childChange = (val) => {
  console.log(val);
  customVal.value.name = val;
};
</script>

<style lang="scss" scoped></style>
